function defineWaterWidgets(){
	
	var FORM_ITEM_ID = 'formId';
	var LOAD_EVENT = 'load';
	var CHANGE_EVENT = 'change';
	var SELECT_EVENT = 'select';
	hf.widget.WaterWindow = Ext.extend(Ext.Window, {
		constructor: function(config) {
			Ext.apply(this, {
				layout:'fit',
				width:400,
				shadow: new Ext.Shadow({mode: 'drop'}),
				plain: true,
				modal: true,
				draggable: true,
					items: [{
						xtype: 'form',
						labelWidth: 230,
						itemId: FORM_ITEM_ID,
						frame: true,
						monitorValid: true,
						items: config.formItems,
						buttons:[{xtype: 'form-button', ref: '../../clearButton', text: labels['clear.button.label'], iconCls: 'icon-clear', buttonEvent: CLEAR_EVENT, tooltip: qtips['qtips.button.clear']}, 
							     {xtype: 'form-button', ref: '../../saveButton', text: labels['button.title.save'], iconCls: 'icon-save', buttonEvent: SAVE_EVENT, formBind: true, tooltip: qtips['qtips.tarif.save']}]	
					}]
			});
			hf.widget.WaterWindow.superclass.constructor.apply(this, arguments);
			
			this.on(SAVE_EVENT, function(button, event){
				this.saveRecord();
			});
    		this.on(CLEAR_EVENT, function(button, event){
    			this.clearData();
    		});
		    this.on(SHOW_EVENT, function(){
		    	this.tarifColdCombo.getStore().load();
		    	this.tarifHotCombo.getStore().load();
		    });
		    
		    this.on(LOAD_EVENT, function(store, records, options){
		    	if(store == this.tarifColdCombo.getStore()){
		    		this.coldTarifsLoaded = true;
		    	}
		    	if(store == this.tarifHotCombo.getStore()){
		    		this.hotTarifsLoaded = true;
		    	}
		    	if(this.coldTarifsLoaded && this.hotTarifsLoaded){
		    		this.loadData();
		    	}
		    });
		    
		    this.on(CHANGE_EVENT, function(field, newValue, oldValue){
		    	this.fieldDataChanged(field, newValue, oldValue);
		    });
    
		    this.on(SELECT_EVENT, function(combo, record, index){
		    	this.calculateSumma();
		    });
		    
			this.relayEvents(this.clearButton, [CLEAR_EVENT]);
			this.relayEvents(this.saveButton, [SAVE_EVENT]);
			
			this.relayEvents(this.currentColdField, [CHANGE_EVENT]);
			this.relayEvents(this.previousColdField, [CHANGE_EVENT]);
			this.relayEvents(this.currentHotField, [CHANGE_EVENT]);
			this.relayEvents(this.previousHotField, [CHANGE_EVENT]);
			this.relayEvents(this.tarifColdCombo, [SELECT_EVENT]);
			this.relayEvents(this.tarifHotCombo, [SELECT_EVENT]);
			this.relayEvents(this.tarifColdCombo.getStore(), [LOAD_EVENT]);
			this.relayEvents(this.tarifHotCombo.getStore(), [LOAD_EVENT]);
		},
		
		fieldDataChanged: function(field, newValue, oldValue){
			this.calculateSumma();
		},
		
		calculateSumma: function(){
			var tarifCold = this.tarifColdCombo.getStore().getById(this.tarifColdCombo.getValue());
			var tarifHot = this.tarifHotCombo.getStore().getById(this.tarifHotCombo.getValue());
			if(tarifCold != null && tarifHot != null){
				var deltaCold = this.currentColdField.getValue() - this.previousColdField.getValue();
				var deltaHot = this.currentHotField.getValue() - this.previousHotField.getValue();
				var summaCold = 0.00;
				var summaHot = 0.00;
				if(tarifCold.data.tarifType == WATER_TARIF_COUNTER){
					summaCold = (deltaCold + deltaHot)*tarifCold.data.summa;
				}else if(tarifCold.data.tarifType == WATER_TARIF_FIXED){
					summaCold = tarifCold.data.summa;
				}
				if(tarifHot.data.tarifType == WATER_TARIF_COUNTER){
					summaHot = deltaHot*tarifHot.data.summa;
				}else if(tarifHot.data.tarifType == WATER_TARIF_FIXED){
					summaHot = tarifHot.data.summa;
				}
				this.deltaColdField.setValue(deltaCold);
				this.deltaHotField.setValue(deltaHot);
				this.summaColdField.setValue(summaCold);
				this.summaHotField.setValue(summaHot);
				this.summaField.setValue(summaCold + summaHot);
			}
		},
		
		//persist record to store and close window 
		saveRecord: function(){
			if(Ext.isDefined(this.grid) && this.grid != null){
				this.calculateSumma();
				if(this.record == null){
					var store = this.grid.getStore();
	    			this.record = new store.recordType(store.defaultData, FAKE_ID);
				}
				this.getComponent(FORM_ITEM_ID).getForm().updateRecord(this.record);
				if(this.record.id == FAKE_ID){
					this.grid.getStore().insert(0, this.record);
				}
			}
			this.record = null;
			this.close();
		},
		
		//clear all inputed values
		clearData: function(){
			this.getComponent(FORM_ITEM_ID).getForm().reset();
		},
		
		//load data from grid record after window appear
		loadData: function(){
			if(this.record == null){
	    		this.clearData();
	    	}else{
	    		this.getComponent(FORM_ITEM_ID).getForm().loadRecord(this.record);
	    		this.calculateSumma();
	    	}
		}
		
	});
	Ext.reg('water-window', hf.widget.WaterWindow);
	
	hf.widget.WaterDeltaChartPanel = Ext.extend(Ext.Panel,{
		constructor: function() {
			Ext.apply(this, {
				title: labels['label.water.delta.chart.title'],
				flex: 1, 
				frame: true,
				items: [{
					xtype: 'columnchart',
					store: {
						xtype: 'arraystore',
						fields: [
							{name: 'id', type: INTEGER},
							{name: 'monthYear', type: STRING},
							{name: 'deltaCold', type: INTEGER},
							{name: 'deltaHot', type: INTEGER}
						]
					},
					anchor: '100% 100%',
					ref: '../../deltaChart',
					xField: 'monthYear',
					yAxis: new Ext.chart.NumericAxis({
						labelRenderer: Ext.util.Format.numberRenderer('0')
					}),
					series: [{
						type: 'column',
						displayName: qtips['qtips.water.cold.delta'],
						yField: 'deltaCold',
						style: {color: COLOR_HEX_BLUE}
					},{
						type: 'column',
						displayName: qtips['qtips.water.hot.delta'],
						yField: 'deltaHot',
						style: {color: COLOR_HEX_RED}
					}]
				}]
			});
			hf.widget.WaterDeltaChartPanel.superclass.constructor.apply(this, arguments);
		}
	});
	Ext.reg('water-delta-chart-panel', hf.widget.WaterDeltaChartPanel);
	
	hf.widget.WaterSummaChartPanel = Ext.extend(Ext.Panel,{
		constructor: function() {
			Ext.apply(this, {
				title: labels['label.chart.title'],
				flex: 1, 
				frame: true,
				items: [{
					xtype: 'linechart',
					store: null,
					anchor: '100% 100%',
					ref: '../../summaChart',
					xField: 'monthYear',
					yAxis: new Ext.chart.NumericAxis({
						labelRenderer: Ext.util.Format.numberRenderer('0.00')
					}),
					series: [{
						type: 'line',
						displayName: qtips['qtips.water.cold.summa'],
						yField: 'summaCold',
						style: {color: COLOR_HEX_BLUE}
					},{
						type: 'line',
						displayName: qtips['qtips.water.hot.summa'],
						yField: 'summaHot',
						style: {color: COLOR_HEX_RED}
					}]
				}]
			});
			hf.widget.WaterSummaChartPanel.superclass.constructor.apply(this, arguments);
		}
	});
	Ext.reg('water-summa-chart-panel', hf.widget.WaterSummaChartPanel);
	
	hf.widget.WaterTab = Ext.extend(Ext.Panel, {
		constructor: function(config) {
			Ext.apply(this, {
				layout: 'anchor'
	    	});
	    	hf.widget.WaterTab.superclass.constructor.apply(this, arguments);
	    	this.on('activate', function(tab) {
	    		this.tarifColdGrid.loadData();
	    		this.tarifHotGrid.loadData();
	    		this.recordGrid.loadData();
	    		this.summaChart.bindStore(this.recordGrid.getStore());
	    	});
	    	this.on(LOAD_EVENT, function(store, records, options){
	    		if(store == this.tarifColdGrid.getStore()){
		    		this.coldTarifsLoaded = true;
		    	}else if(store == this.tarifHotGrid.getStore()){
		    		this.hotTarifsLoaded = true;
		    	}else if(store == this.recordGrid.getStore()){
		    		var chartStore = this.deltaChart.store;
		    		chartStore.removeAll();
		    		var chartRecords = new Array(); 
		    		store.each(function(rec){	
		    			var r = new chartStore.recordType(
		    				{id: rec.data.id, monthYear: rec.data.monthYear, 
		    				deltaCold: rec.data.currentValueCold-rec.data.previousValueCold,
		    				deltaHot: rec.data.currentValueHot-rec.data.previousValueHot});
		    			chartRecords.push(r);	
		    		});
		    		chartStore.add(chartRecords);
		    	}
		    	if(this.coldTarifsLoaded && this.hotTarifsLoaded){
		    		this.restrictAddFunction();
		    	}
	    	});
	    	this.relayEvents(this.tarifColdGrid.getStore(), [LOAD_EVENT]);
	    	this.relayEvents(this.tarifHotGrid.getStore(), [LOAD_EVENT]);
	    	this.relayEvents(this.recordGrid.getStore(), [LOAD_EVENT]);
    	},
    	restrictAddFunction: function(){
    		if(this.tarifColdGrid.getStore().getTotalCount() > 0 &&
    		 this.tarifHotGrid.getStore().getTotalCount() > 0){
    			this.recordGrid.addButton.enable();
    		}else{
    			this.recordGrid.addButton.disable();
    		}
    	}
    	
	});
	Ext.reg('water-tab', hf.widget.WaterTab);
};

function createWaterTab(){
	defineWaterWidgets();
	
	//store for tarif records
	var tarifColdStore = {
		xtype: 'app-store',
		viewAction: 'waterColdTarif/view.action',
		addAction: 'waterColdTarif/update.action',
		updateAction: 'waterColdTarif/update.action',
		deleteAction: 'waterColdTarif/delete.action',
		columnArray: [
         	{name: indexes['id'], type: INTEGER}, 
         	{name: indexes['enabled'], type: INTEGER},
         	{name: indexes['modelId'],  type: INTEGER},
         	{name: 'tarifName', type: STRING},
         	{name: 'tarifType', type: INTEGER},
         	{name: 'summa',  type: FLOAT}
      	],
      	defaultData: {id : FAKE_ID, enabled : ENTITY_STATE_ENABLED, modelId : FAKE_ID, tarifName: '', tarifType: 0, summa: 0.00}
	};
	
	//store for tarif records
	var tarifHotStore = {
		xtype: 'app-store',
		viewAction: 'waterHotTarif/view.action',
		addAction: 'waterHotTarif/update.action',
		updateAction: 'waterHotTarif/update.action',
		deleteAction: 'waterHotTarif/delete.action',
		columnArray: [
         	{name: indexes['id'], type: INTEGER}, 
         	{name: indexes['enabled'], type: INTEGER},
         	{name: indexes['modelId'],  type: INTEGER},
         	{name: 'tarifName', type: STRING},
         	{name: 'tarifType', type: INTEGER},
         	{name: 'summa',  type: FLOAT}
      	],
      	defaultData: {id : FAKE_ID, enabled : ENTITY_STATE_ENABLED, modelId : FAKE_ID, tarifName: '', tarifType: 0, summa: 0.00}
	};
	
	//store for communal records
	var recordStore = {
		xtype: 'app-store',
		viewAction: 'water/view.action',
		addAction: 'water/update.action',
		updateAction: 'water/update.action',
		deleteAction: 'water/delete.action',
		columnArray: [
         	{name: indexes['id'], type: INTEGER}, 
         	{name: indexes['enabled'], type: INTEGER},
         	{name: indexes['summa'], type: FLOAT},
         	{name: indexes['date'],  type: DATE},
         	{name: indexes['modelId'],  type: INTEGER},
         	{name: indexes['month'],  type: INTEGER},
         	{name: indexes['year'],  type: INTEGER},
         	{name: 'tarifColdId',  type: INTEGER},
         	{name: 'tarifHotId',  type: INTEGER},
         	{name: 'currentValueCold',  type: INTEGER},
         	{name: 'currentValueHot',  type: INTEGER},
         	{name: 'previousValueCold',  type: INTEGER},
         	{name: 'previousValueHot',  type: INTEGER},
         	{name: 'summaCold', type: FLOAT},
         	{name: 'summaHot', type: FLOAT},
         	{name: 'monthYear',  type: STRING}
      	],
      	defaultData: {id : FAKE_ID, enabled : ENTITY_STATE_ENABLED, modelId : FAKE_ID, tarifColdId: 0, 
		   tarifHotId: 0, date: new Date(), year: new Date().getFullYear(), month: new Date().getMonth(), 
		   currentValueCold: 0, previousValueCold: 0, currentValueHot: 0, previousValueHot: 0,
		   summaCold: 0.00, summaHot: 0.00, summa: 0.00, monthYear: ''}
	};
	
	var tarifWindow = {
		xtype: 'tarif-window',
		height: 180,
		formItems: [
			{xtype: 'id-hidden-field'},
			{xtype: 'enabled-hidden-field'},
			{xtype: 'modelid-hidden-field'},
			{xtype: 'textfield', fieldLabel: labels['label.tarif.name'], name: 'tarifName', allowBlank: false, blankText: labels['label.value.empty']},
			{xtype: 'tarif-type-combo', dataArray: waterTarifTypes, value: WATER_TARIF_COUNTER},
		    {xtype: 'double-number-field', fieldLabel: labels['label.summa'], name: 'summa'}
	    ]
	};
	
	var communalWindow = {
		xtype: 'water-window',
		title: labels['label.window.title'],
		height: 450,
		formItems: [
			{xtype: 'id-hidden-field'},
			{xtype: 'enabled-hidden-field'},
			{xtype: 'modelid-hidden-field'},
			{xtype: 'tarif-combo', store: tarifColdStore, name: 'tarifColdId', ref: '../tarifColdCombo', fieldLabel: labels['label.water.tarif.cold']},
			{xtype: 'tarif-combo', store: tarifHotStore, name: 'tarifHotId', ref: '../tarifHotCombo', fieldLabel: labels['label.water.tarif.hot']},
		    {xtype: 'communal-date-field'},
		    {xtype: 'year-combo'},
		    {xtype: 'month-combo'},
		    {xtype: 'integer-number-field', ref: '../currentColdField', fieldLabel: labels['label.water.counter.cold.current'], name: 'currentValueCold'},
		    {xtype: 'integer-number-field', ref: '../previousColdField', fieldLabel: labels['label.water.counter.cold.previous'], name: 'previousValueCold'},
		    {xtype: 'integer-number-field', ref: '../deltaColdField', fieldLabel: labels['label.water.delta.cold'], submitValue: false, readOnly: true},
		    {xtype: 'integer-number-field', ref: '../currentHotField', fieldLabel: labels['label.water.counter.hot.current'], name: 'currentValueHot'},
		    {xtype: 'integer-number-field', ref: '../previousHotField', fieldLabel: labels['label.water.counter.hot.previous'], name: 'previousValueHot'},
		    {xtype: 'integer-number-field', ref: '../deltaHotField', fieldLabel: labels['label.water.delta.hot'], submitValue: false, readOnly: true},
		    {xtype: 'double-number-field', ref: '../summaColdField', fieldLabel: labels['label.water.summa.cold'], name: 'summaCold', readOnly: true},
		    {xtype: 'double-number-field', ref: '../summaHotField', fieldLabel: labels['label.water.summa.hot'], name: 'summaHot', readOnly: true},
		    {xtype: 'double-number-field', ref: '../summaField', fieldLabel: labels['label.summa'], name: 'summa', readOnly: true}			    
       ]
	};
	
	//grid for displaying tarif data
	var tarifColdGrid = {
		xtype: 'app-grid',
		title: labels['label.tarif.cold.grid.title'],
		ref: '../../tarifColdGrid',
		store: tarifColdStore,
   		colModel: new Ext.grid.ColumnModel({
       		defaults: {width: 70, sortable: true, hideable: true},
        	columns: [new Ext.grid.RowNumberer({header: '№'}),
        			  {xtype: 'gridcolumn', id: 'tarifName', dataIndex: 'tarifName', header: labels['label.tarif.name'], width: 100, tooltip: qtips['qtips.column.tarif.name'], hideable: false},       			 	 
       			 	  {xtype: 'gridcolumn', id: 'tarifType', dataIndex: 'tarifType', header: labels['label.tarif.type'], tooltip: qtips['qtips.column.tarif.type'],
       			 	  renderer: function(val, x, rec){
       			 	  	return waterTarifTypes[val][1];
       			 	  }},
       			 	  {xtype: 'numbercolumn', id: 'summa', dataIndex: 'summa', header: labels['label.summa'], tooltip: labels['label.summa']},
       			 	  {xtype: 'action-column'}
       		]
 		}),
 		windowType: tarifWindow,
 		autoExpandColumn: 'tarifName',
 		anchor: '100% 50%'
	};
	
	//grid for displaying tarif data
	var tarifHotGrid = {
		xtype: 'app-grid',
		title: labels['label.tarif.hot.grid.title'],
		ref: '../../tarifHotGrid',
		store: tarifHotStore,
   		colModel: new Ext.grid.ColumnModel({
       		defaults: {width: 70, sortable: true, hideable: true},
        	columns: [new Ext.grid.RowNumberer({header: '№'}),
        			  {xtype: 'gridcolumn', id: 'tarifName', dataIndex: 'tarifName', header: labels['label.tarif.name'], width: 100, tooltip: qtips['qtips.column.tarif.name'], hideable: false},       			 	 
       			 	  {xtype: 'gridcolumn', id: 'tarifType', dataIndex: 'tarifType', header: labels['label.tarif.type'], tooltip: qtips['qtips.column.tarif.type'],
       			 	  renderer: function(val, x, rec){
       			 	  	return waterTarifTypes[val][1];
       			 	  }},
       			 	  {xtype: 'numbercolumn', id: 'summa', dataIndex: 'summa', header: labels['label.summa'], tooltip: labels['label.summa']},
       			 	  {xtype: 'action-column'}
       		]
 		}),
 		windowType: tarifWindow,
 		autoExpandColumn: 'tarifName',
 		anchor: '100% 50%'
	};
	
	//grid for displaying communal records
	var recordGrid = {
		xtype: 'communal-grid',
		title: labels['label.water.grid.title'],
		ref: '../recordGrid',
		store: recordStore,
   		colModel: new Ext.grid.ColumnModel({
       		defaults: {width: 60, sortable: true, hideable: true},
        	columns: [new Ext.grid.RowNumberer({header: '№'}),
        			  {xtype: 'datecolumn', id: indexes['date'], dataIndex: indexes['date'], header: labels['label.date'], tooltip: qtips['qtips.column.electricity.date']},
       			 	  {xtype: 'gridcolumn', id: indexes['year'], dataIndex: indexes['year'], header: labels['label.year'], tooltip: qtips['qtips.column.year']},
       			 	  {xtype: 'gridcolumn', id: indexes['month'], dataIndex: indexes['month'], header: labels['label.month'], tooltip: qtips['qtips.column.month'],
       			 	  renderer: function(val, x, rec){return months[val][1];}},
       			 	  {xtype: 'numbercolumn', id: 'currentValueCold', dataIndex: 'currentValueCold', header: labels['label.column.water.counter.cold.current'], tooltip: qtips['qtips.water.counter.cold.current'], width: 80},
       			 	  {xtype: 'numbercolumn', id: 'previoustValueCold', dataIndex: 'previousValueCold', header: labels['label.column.water.counter.cold.previous'], tooltip: qtips['qtips.water.counter.cold.previous'], width: 80},
       			 	  {xtype: 'numbercolumn', id: 'deltaValueCold', dataIndex: 'enabled', header: labels['label.column.water.delta.cold'], tooltip: qtips['qtips.water.counter.cold.delta'],
       			 	  renderer: function(val, x, rec){return rec.data.currentValueCold - rec.data.previousValueCold;}},
       			 	  {xtype: 'numbercolumn', id: 'currentValueHot', dataIndex: 'currentValueHot', header: labels['label.column.water.counter.hot.current'], tooltip: qtips['qtips.water.counter.hot.current'], width: 80},
       			 	  {xtype: 'numbercolumn', id: 'previousValueHot', dataIndex: 'previousValueHot', header: labels['label.column.water.counter.hot.previous'], tooltip: qtips['qtips.water.counter.hot.previous'], width: 80},
       			 	  {xtype: 'numbercolumn', id: 'deltaValueHot', dataIndex: 'enabled', header: labels['label.column.water.delta.hot'], tooltip: qtips['qtips.water.counter.hot.delta'],
       			 	  renderer: function(val, x, rec){return rec.data.currentValueHot - rec.data.previousValueHot;}},
       			 	  {xtype: 'numbercolumn', id: 'summaCold', dataIndex: 'summaCold', header: labels['label.column.water.summa.cold'], tooltip: qtips['qtips.water.cold.summa']},
       			 	  {xtype: 'numbercolumn', id: 'summaHot', dataIndex: 'summaHot', header: labels['label.column.water.summa.hot'], tooltip: qtips['qtips.water.hot.summa']},
       			 	  {xtype: 'numbercolumn', id: indexes['summa'], dataIndex: indexes['summa'], header: labels['label.summa'], tooltip: labels['label.summa']},
       			 	  {xtype: 'action-column'}
       		]
 		}),
 		windowType: communalWindow,
 		autoExpandColumn: indexes['summa'],
 		flex: 1
	};
	
	var tab = {
		xtype: 'water-tab', 
		title: labels['label.water.tab.title'],
		//iconCls: 'icon-water',
		items: [{
			layout: {type: 'hbox', align: 'stretch'},
    		anchor: '100%, 50%',
    		items: [recordGrid]
		},{
			layout: {type: 'hbox', align: 'stretch'},
    		anchor: '100%, 50%',
    		items: [{flex: 1, layout: 'anchor', items: [tarifColdGrid, tarifHotGrid]}, {xtype: 'water-delta-chart-panel'}, {xtype: 'water-summa-chart-panel'}]
		}]
	};
	return tab;
};